* {
  box-sizing: border-box;
}
.table {
  user-select: none;
  cursor: cell;
}
.table .col-header,
.table .row-headers,
.table .cells,
.table .cell,
.table .special-header {
  display: inline-block;
  vertical-align: top;
}
.table .row-container {
  font-size: 0;
}

.table .col-header,
.table .row-header,
.table .special-header,
.table .cell {
  font-size: 20px;
  border: 1px solid rgb(212, 212, 212);
  /* overflow: hidden; */
  background-color: rgb(230, 230, 230);
}
.table .cell {
  background-color: white;
}

.table .row-headers,
.table .row-header,
.table .special-header {
  width: 50px;
}

.table .col-header,
.table .row-header {
  text-align: center;
  font-weight: bold;
}

.table .special-header,
.table .col-header,
.table .row-header,
.table .cell {
  height: 30px;
  position: relative;
}
.table .col-header,
.table .cell {
  width: 100px;
}

.table .col-header:hover,
.table .row-header:hover,
.table .col-header.resize,
.table .row-header.resize {
  background-color: rgb(159, 213, 183);
}
.table .col-header.no-resize,
.table .row-header.no-resize {
  background-color: rgb(230, 230, 230);
}

.table .col-header.selected,
.table .row-header.selected {
  background-color: rgb(210, 210, 210);
  color: rgb(27, 93, 57);
}
.table .col-header.selected {
  border-bottom: 1px solid rgb(33, 115, 70);
}
.table .row-header.selected {
  border-right: 1px solid rgb(33, 115, 70);
}

.row-resize {
  cursor: row-resize;
}
.col-resize {
  cursor: col-resize;
}

/* resize线 */
.row-resize-line {
  border-top: 2px dotted rgb(158, 158, 158);
  width: 2000px;
  left: 0;
  bottom: -2px;
  visibility: hidden;
  position: absolute;
  z-index: 100;
}
.col-resize-line {
  height: 1000px;
  border-left: 2px dotted rgb(158, 158, 158);
  visibility: hidden;
  right: -2px;
  top: 0;
  position: absolute;
  z-index: 100;
}

/* 编辑框 */
.edit-border {
  visibility: hidden;
  min-height: calc(100% + 4px);
  width: calc(100% + 4px);
  border: 2px rgb(36, 117, 72) solid;
  left: -2px;
  top: -2px;
  z-index: 100;
  position: absolute;
  outline: 0px solid transparent;
}

/* 选择框 */
.select-top-border {
  border-top: 2px rgb(36, 117, 72) solid;
  top: -2px;
  left: -2px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
}
.select-left-border {
  border-left: 2px rgb(36, 117, 72) solid;
  top: -2px;
  left: -2px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
}
.select-bottom-border {
  border-top: 2px rgb(36, 117, 72) solid;
  bottom: -2px;
  right: 2px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
}

.select-right-border {
  border-left: 2px rgb(36, 117, 72) solid;
  bottom: 2px;
  right: -2px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
}

.select-dot {
  width: 4px;
  height: 4px;
  background-color: rgb(36, 117, 72);
  border-radius: 2px;
  bottom: -3px;
  right: -3px;
  position: absolute;
  z-index: 100;
  visibility: hidden;
}

/* 选择背景 */
.table .cell.selected {
  background-color: rgb(199, 199, 199);
}
